<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索示例（增删改）</title>
  <script src="./vue.js"></script>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }

    input {
      padding: 5px;
      margin-bottom: 10px;
    }

    button {
      padding: 5px 10px;
      border: none;
      background-color:red;
      color: white;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
        <label for="newFirstName">First Name:</label>
        <input type="text" v-model="newUser.firstName" id="newFirstName">
        <label for="newLastName">Last Name:</label>
        <input type="text" v-model="newUser.lastName" id="newLastName">
        <label for="newUsername">Username:</label>
        <input type="text" v-model="newUser.username" id="newUsername">
        <button @click="addUser">添加</button>
      </div>
    <h2>搜索</h2><label for="firstNameInput">请输入</label>
    <input type="text" v-model="searchFirstName" id="firstNameInput">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.firstName }}</td>
          <td>{{ user.lastName }}</td>
          <td>{{ user.username }}</td>
          <td>
            <button @click="editUser(user.id)">编辑</button>
            <button @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          searchFirstName: '',
          users: [
            { id: 1, firstName: 'safsag', lastName: 'vgsdf', username: 'dfhdf' },
            { id: 2, firstName: '53235', lastName: '35325', username: '3523' },
            { id: 3, firstName: 'fdhdf', lastName: '436', username: 'fdn46' },
            { id: 4, firstName: 'fdh', lastName: '46', username: 'hfd' }
          ],
          newUser: { firstName: '', lastName: '', username: '' }
        };
      },
      computed: {
        filteredUsers() {
          return this.users.filter(user => user.firstName.toLowerCase().includes(this.searchFirstName.toLowerCase()));
        }
      },
      methods: {
        editUser(userId) {
          const userToEdit = this.users.find(user => user.id === userId);
          const updatedUser = prompt('编辑用户信息（格式：First Name - Last Name - Username）', `${userToEdit.firstName} - ${userToEdit.lastName} - ${userToEdit.username}`);
          if (updatedUser) {
            const [firstName, lastName, username] = updatedUser.split(' - ');
            userToEdit.firstName = firstName;
            userToEdit.lastName = lastName;
            userToEdit.username = username;
          }
        },
        deleteUser(userId) {
          this.users = this.users.filter(user => user.id!== userId);
        },
        addUser() {
          if (this.newUser.firstName && this.newUser.lastName && this.newUser.username) {
            const newId = this.users.length > 0? Math.max(...this.users.map(user => user.id)) + 1 : 1;
            this.users.push({ id: newId,...this.newUser });
            this.newUser = { firstName: '', lastName: '', username: '' };
          }
        }
      }
    });
    app.mount('#app');
  </script>
</body>

</html>